<template>
  <div class="wrapper">
    <div class="header">
      <indexHeader />
    </div>
    <div class="sidebar">
      <indexMenu />
    </div>
    <div class="content-box"
      :class="[isCollapse ?'sidebarOpen':'sidebarCollect' ]">
      <div class="content">
        <el-tabs v-model="currentTabIndex"
          type="card"
          @tab-remove="$tab.close"
          @tab-click="$tab.showTab">
          <el-tab-pane v-for="item in openedTabs"
            :key="item.menuId"
            :label="item.title"
            :name="item.menuId"
            :closable="item.menuId !== homeTabMenuId">
            <el-main class="wrap-content"
              :style="{height: mainHeight +'px'}">
              <component :is="item.components[item.components.length - 1].path"
                v-if="item.refresh"></component>
            </el-main>
          </el-tab-pane>
        </el-tabs>
      </div>
      <indexFoot />
    </div>
  </div>
</template>
<script>
import indexHeader from "../components/page/header";
import indexMenu from "../components/page/menu";
import indexFoot from "../components/page/foot";
import { Tabs, TabPane, Main } from "element-ui";
import { mapGetters } from "vuex";

export default {
  components: {
    indexHeader,
    indexMenu,
    indexFoot,
    [Tabs.name]: Tabs,
    [TabPane.name]: TabPane,
    [Main.name]: Main,
  },
  data() {
    return {
      winHeight: document.documentElement.clientHeight,
    };
  },
  computed: {
    // 当前 tab 项的 name
    currentTabIndex: {
      get: function () {
        return this.$store.getters.GetCurrentTabIndex;
      },
      set: function (newValue) {
        return newValue;
      },
    },
    // 打开的页签列表
    openedTabs() {
      return this.$store.getters.GetOpenedTabs;
    },
    // 主页 tab 的 menuId
    homeTabMenuId() {
      return this.$store.getters.GetHomeTabMenuId;
    },
    GetRefresh: {
      get: function () {
        return this.$store.getters.GetRefresh;
      },
      set: function (newValue) {
        return newValue;
      },
    },
    mainHeight: {
      get() {
        return this.winHeight - 145;
      },
    },
    ...mapGetters({
      isCollapse: "GetSidebar",
    }),
  },
  methods: {},
  mounted() {
    var that = this;
    window.onresize = () => {
      return (() => {
        that.winHeight = document.documentElement.clientHeight;
      })();
    };
  },
};
</script>

<style  scoped>
.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.header {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 60px;
  font-size: 22px;
  color: #fff;
}

.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 60px;
  bottom: 0;
  overflow-y: scroll;
  background: #393d49;
}

.content-box {
  position: absolute;
  right: 0px;
  top: 60px;
  bottom: 0;
  padding-bottom: 30px;
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
  background: #f0f0f0;
}

/* 缩进 */
.sidebarOpen {
  left: 200px;
}
.sidebarCollect {
  left: 65px;
}

* >>> .el-tabs__nav-scroll {
  background: #fff;
}

* >>> .el-tabs__header {
  overflow: hidden;
  background: #fff;
  -webkit-box-shadow: 0 5px 10px #ddd;
  box-shadow: 0 5px 10px #ddd;
  margin: 0px;
  position: relative;
  z-index: 10;
}
.wrap-content {
  width: auto;
  height: 100%;
  padding: 10px;
  overflow-y: scroll;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>